<template>
  <div class="container">
    <div class="container-in">
      <div style="height: 15px"></div>
      <div style="display: flex;align-items: center;justify-content: space-between;width: 90%;margin-left: 5%;">
        <div style="display: flex;align-items: center;">
          <div class="line"></div>
          <div style="width: 10px"></div>
          <div>日期选择</div>
        </div>
        <div>{{ showDate }}</div>
      </div>
      <div style="height: 20rpx;"></div>
      <!--  -->
      <view class="BigTime">
						<view v-for="(day, index) in newWeek" :key="index">
							<view class="round" :class="currentIndex === index && clicked ? 'active' : ''" @click="look(day, index)">
								<!-- 周几 -->
								<view>
                  <div style="height: 7.5rpx;"></div>
									<div style="text-align: center">{{ day.dayOfWeek }}</div>
                  <div style="height: 7.5rpx;"></div>
									<div style="text-align: center">{{ day.formattedDate }}</div>
                  <div style="height: 7.5rpx;"></div>
								</view>
							</view>
						</view>
			</view>
          <div style="height: 10px"></div>
        <div class="roundTime">
          <div v-for="item in timeSlots" style="width: 32%;" :key="item" @click="selectTime(item)">
          <div class="time">{{ item.start }} - {{ item.end }}</div>
        </div>
        </div>
      <!--  -->
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      show: false,
      formattedDate: "",
			newWeek: [],
      currentIndex:0,
      clicked: true,
      timeSlots:[],
      current: null,
      selectedDate: new Date(), // 当前选中的日期，默认为今天
      currentTime: new Date(), // 当前时间
      startTime: 8, // 开始时间（小时）
      endTime: 17.5, // 结束时间（小时）
      interval: 0.5, // 时间间隔（小时）
      doneDate:'',
      doneTime:'',
      showDate:''
    };
  },
  computed: {
    timeSlots() {
      const timeSlots = [];
      for (let hour = this.startTime; hour < this.endTime; hour += this.interval) {
        const startHour = Math.floor(hour);
        const startMinutes = (hour % 1) * 60 === 0 ? '00' : '30';
        const endHour = Math.floor(hour + this.interval);
        const endMinutes = ((hour + this.interval) % 1) * 60 === 0 ? '00' : '30';
        const startTimeSlot = `${startHour < 10 ? '0' : ''}${startHour}:${startMinutes}`;
        const endTimeSlot = `${endHour < 10 ? '0' : ''}${endHour}:${endMinutes}`;
        timeSlots.push({ start: startTimeSlot, end: endTimeSlot });
      }
      return timeSlots;
    }
  },
  methods: {
    // 时间选择
    selectTime(i){
      console.log(i,'iiii');
      this.doneTime = i.start +'-'+ i.end;
      console.log(this.doneTime);
      uni.setStorageSync('doneTime',this.doneTime); 
      uni.navigateTo({ url: '/pagesFarmer/index/make' })
    },
    // 日期选择
    look(item, index) {
				console.log(item, index);
				this.currentIndex = index;
      uni.setStorageSync('doneDate',this.transitionYear(item)); 
			},
    getCurrentDateFormatted() {
				const today = new Date();
				const month = (today.getMonth() + 1).toString().padStart(2, "0"); // 获取月份并补齐至两位
				const day = today.getDate().toString().padStart(2, "0"); // 获取日期并补齐至两位
				return `${month}.${day}`;
			},
      getWeekday(day) {
				const weekdays = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
				return weekdays[day - 1];
			},
			getDate(day) {
				const now = new Date();
				const currentDay = now.getDay();
				const daysToAdd = (day - currentDay + 7) % 7;
				const targetDate = new Date(
					now.getTime() + daysToAdd * 24 * 60 * 60 * 1000
				);
				const month = targetDate.getMonth() + 1;
				const dayOfMonth = targetDate.getDate();
				return `${month}/${dayOfMonth}`;
			},
      transitionYear(i){
        const currentYear = new Date().getFullYear();//getYear
        const [month, day] = i.formattedDate.split('.');
        const formattedDate = `${currentYear}-${month}-${day}`;
        return formattedDate;
        }
  },
  onLoad(){
    function getDayOfWeek(date) {
				const daysOfWeek = [
					"周日",
					"周一",
					"周二",
					"周三",
					"周四",
					"周五",
					"周六",
				];
				return daysOfWeek[date.getDay()];
			}
			function generateDatesAndDaysOfWeek() {
				const result = [];
				const today = new Date();

				for (let i = 1; i < 8; i++) {
					const currentDate = new Date(today);
					currentDate.setDate(currentDate.getDate() + i);
					const dayOfWeek = getDayOfWeek(currentDate);
					const formattedDate = `${(currentDate.getMonth() + 1)
          .toString()
          .padStart(2, "0")}.${currentDate
          .getDate()
          .toString()
          .padStart(2, "0")}`;
          console.log(formattedDate[0],'formattedDate');
         
					result.push({
						dayOfWeek,
						formattedDate
					});
				}

				return result;
			}
      const daysOfWeek = generateDatesAndDaysOfWeek();
			this.newWeek = daysOfWeek;
      console.log(this.newWeek);
  },
  onShow(){
    const nowDate = this.newWeek[this.currentIndex];
    // this.transitionYear(nowDate);
    // console.log(this.transitionYear(nowDate),'this.transitionYear(nowDate);');
    uni.setStorageSync('doneDate',this.transitionYear(nowDate)); 
    // 获取当前日期
let currentDate = new Date();

// 获取年份
let year = currentDate.getFullYear();

// 获取月份，并补零
let month = (currentDate.getMonth() + 1).toString().padStart(2, '0');

// 格式化输出
let formattedDate = `${year}.${month}`;
this.showDate = formattedDate;
// 打印输出


  }
};
</script>
<style lang="scss">
.container {
  height: 100vh;
  width: 100vw;
  // background: #e3ede2;
  background: #2a5030;
  color: #1a512c;
  overflow-y: scroll;
}
.container-in {
  background: #e3ede2;
  border-radius: 10px;
  overflow-y: scroll;
  height: 100vh;
  width: 100vw;
}
.look {
  padding: 3px;
  color: #fff;
  background: #46a164;
  border-radius: 5px;
  width: 20%;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #e5ede3;
}
.looks {
  padding: 3px;
  color: #fff;
  background: #c1e1c9;
  border-radius: 5px;
  border: 0.5px solid #46a164;
  width: 20%;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5f9f6a;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin-left: 5%;
}
.line {
  background: #1a512c;
  width: 7rpx;
  height: 35rpx;
}
.con {
  width: 95%;
  margin-left: 2.5%;
  padding: 10px;
}
.title {
  font-size: 20px;
  font-weight: 500;
}
.borders-min {
  border: 1px solid #1a512c;
  border-radius: 5px;
  text-align: center;
}
//
.BigTime {
		width: 90%;
    margin-left: 5%;
    font-size: 14px;
		display: flex;
		justify-content: space-between;
	}

	.round {
		color: black;
		width: 100rpx;
		border-radius: 5px;
		display: flex;
		justify-content: center;
    font-size: 14px;
	}

	.active {
		background-color: #2A5030;
		color: #fff;
		width: 100rpx;
		border-radius: 5px;
		display: flex;
		justify-content: center;
    font-size: 14px;
	}
  .slot {
		width: 70px;
		height: 30px;
		border: 1px solid gray;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 8px;
	}
	.slots {
		width: 70px;
		height: 30px;
		background: #f4e8e6;
		border: 1px solid #cc5042;
		color: #cc5042;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 8px;
	}
  .time{
    border-radius: 6px;
    border: 1px solid #1A512C;
    margin-top: 12.5rpx;
    padding: 10rpx;
    text-align: center;
  }
  .roundTime{
    display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between;
    width: 90%;
    margin-left: 5%;
    font-size: 14px;
  }
</style>
